<template>
   <el-row>
        <div class="infinite-list-wrapper" style="overflow:auto">
            <ul
            class="list"
            v-loading="loading"
                element-loading-text="加载更新中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            v-infinite-scroll="load"
            :infinite-scroll-disabled="disabled">
            <el-col :span="8" v-for="(item,i) in newlist" :key="i" class="">
                <router-link :to="{name:'buyboxdetail',params:{goodid:item._id}}">
                    <el-card class="box-card list-item">
                        <img :src="item.img" alt="">
                       <p>{{item.name}}--{{item.price}} -- {{item.type.text}} </p>
                    </el-card>

                </router-link>
            </el-col>
             
            </ul>
           <p v-if="loading">加载中...</p>
            <p v-if="noMore">没有更多了</p>
        </div>
   </el-row>
</template>

<script>

export default {
    props:["typeobj","goods"],
    data(){
        return {
            list:[],
            count:6,
            loading:false
        }
    },
    methods:{
        load(){
            this.loading = true;
            setTimeout(()=>{
                this.count +=3
                this.loading = false
            },1200)
        }
    },
    computed:{
        noMore(){
            return this.count >= this.list.length
        },
        disabled(){
            return this.loading || this.noMore
        },
        newlist(){
            return this.list.slice(0,this.count)
        }
    },
    mounted(){
        this.list = this.goods.filter(item=> item.type.value == this.typeobj.value)
    }
}
</script>


<style lang="scss" scoped>
.list-item{
    margin:10px 5px;
    img{
        width:100%;
        height:240px;
    }
    p{
        width:100%;
        height:60px;
        line-height: 20px;
        margin-top:10px;
        color:darkorange;
    }
}
.ptips{
    width:100%;
    text-align: center;
}
</style>